<template>
  <div class="discussion">
    <!-- 添加评论 -->
    <div class="add">
      <div>
        <el-input
          class="input"
          placeholder="请输入内容"
          v-model="discontent"
        ></el-input>
      </div>
      <div>
        <el-button slot="append" type="primary" @click="addDiscussion(true)"
          >评论</el-button
        >
      </div>
    </div>
    <!-- 无评论时显示的内容 -->
    <div class="noDiscussion" v-if="Object.keys(discussionList).length == 0">
      暂无评论，快去添加吧~
    </div>

    <template v-for="(discussion, i) in discussionList">
      <div class="one" :key="discussion.did">
        <div class="one-left">
          <!-- 头像 -->
          <img :src="discussion.user.image" alt="" />
        </div>
        <!-- 一级评论 -->
        <div class="one-right">
          <!-- 用户名 -->
          <div>
            <span class="username">{{ discussion.user.name }}</span>
          </div>
          <!-- 内容 -->
          <p class="discussioncontent">{{ discussion.content }}</p>
          <!-- 点赞  回复 -->
          <div class="discussioncount">
            <!-- 时间 -->
            <span class="time">{{ discussion.createtime }}</span>
            <!-- 点赞数 -->
            <template
              v-if="discussion.praise != null && discussion.praise.status == 0"
            >
              <img
                src="../../assets/img/topicicon/discussion-like2.png"
                alt=""
                @click="nolikeshow(discussion.did)"
              />
            </template>
            <template v-else>
              <img
                src="../../assets/img/topicicon/discussion-like1.png"
                alt=""
                @click="likeshow(discussion.did)"
              />
            </template>
            <span>{{ discussion.like_num }}</span>
            <!-- 回复数 -->
            <span @click="showDiscussion(true, i)">
              {{ discussion.tagReply == true ? "取消回复" : "回复" }}
            </span>
          </div>
          <div v-if="discussion.tagReply" class="add">
            <div>
              <el-input
                class="input"
                placeholder="请输入内容"
                v-model="discussion.discontent"
                @input="updateView(true, $event, i)"
              ></el-input>
            </div>
            <div>
              <el-button
                slot="append"
                type="primary"
                @click="addDiscussion(false, i)"
                >评论</el-button
              >
            </div>
          </div>
          <!-- 二级评论 -->
          <template v-for="(second, j) in discussion.childList">
            <div class="second" :key="second.did">
              <div class="second-left">
                <!-- 头像 -->
                <img :src="second.user.image" alt="" />
              </div>
              <div class="second-right">
                <div>
                  <!-- 用户名 -->
                  <span class="username">{{ second.user.name }}</span>
                  <template v-if="second.beUser != null">
                    <span class="reply">回复</span>
                    <span class="reply replyusername"
                      >@{{ second.beUser.name }}</span
                    >
                  </template>
                  <!-- 内容 -->
                  <span class="discussioncontent">:{{ second.content }}</span>
                </div>
                <!-- 点赞  回复 -->
                <div class="discussioncount">
                  <!-- 时间 -->
                  <span class="time">{{ second.createtime }}</span>
                  <!-- 点赞数 -->
                  <template
                    v-if="second.praise != null && second.praise.status == 0"
                    style="display: inline-block"
                  >
                    <img
                      src="../../assets/img/topicicon/discussion-like2.png"
                      alt=""
                      @click="nolikeshow(second.did)"
                    />
                  </template>
                  <template v-else style="display: inline-block">
                    <img
                      src="../../assets/img/topicicon/discussion-like1.png"
                      alt=""
                      @click="likeshow(second.did)"
                    />
                  </template>
                  <span>{{ second.like_num }}</span>
                  <template v-if="second.nolike">
                    <img
                      src="../../assets/img/topicicon/discussion-nolike2.png"
                      alt=""
                      @click="second.nolike = true"
                    />
                  </template>
                  <template v-else>
                    <img
                      src="../../assets/img/topicicon/discussion-nolike1.png"
                      alt=""
                      @click="likeshow(second.did)"
                    />
                  </template>
                  <!-- 回复 -->
                  <span @click="showDiscussion(false, i, j)">
                    {{ second.tagReply == true ? "取消回复" : "回复" }}
                  </span>
                </div>
                <div v-if="second.tagReply" class="add">
                  <div>
                    <el-input
                      class="input"
                      placeholder="请输入内容"
                      v-model="second.discontent"
                      @input="updateView(false, $event, i, j)"
                    ></el-input>
                  </div>
                  <div>
                    <el-button
                      slot="append"
                      type="primary"
                      @click="addDiscussion(false, i, j)"
                      >评论</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { discussionAdd, findDiscussion } from "../../api/discussion";
import { topiclike_num } from "../../api/recommend";
import { timeQuantum } from "../../util/timeQuantum";
export default {
  name: "Discussion",
  props: {
    id: 0,
    type: 0,
  },
  data() {
    return {
      discussionList: {},
      discontent: "",
      addquery: {
        uid: localStorage.getItem("uid"),
        content: "",
        id: "",
        bedid: 0,
        childid: 0,
        type: 0,
      },
      findquery: {
        id: 0,
        uid: localStorage.getItem("uid"),
        type: 0,
      },
    };
  },
  created() {
    console.log("discussion创建");
    this.getDiscussion();
  },
  watch: {
    // id(newval, oldval) {
    //   console.log(newval);
    //   // this.id = newval
    //   this.getDiscussion()
    // },
    // type(newval, oldval) {
    //   console.log(newval);
    //   this.getDiscussion()
    // }
  },
  methods: {
    //修改点赞状态
    likeshow(ttid) {
      topiclike_num({
        uid: localStorage.getItem("uid"),
        id: ttid,
        status: 0,
        type: 4,
      }).then((res) => {
        if (res.code == 200) {
          this.getDiscussion();
        }
      });
    },
    nolikeshow(ttid) {
      topiclike_num({
        uid: localStorage.getItem("uid"),
        id: ttid,
        status: 1,
        type: 4,
      }).then((res) => {
        if (res.code == 200) {
          this.getDiscussion();
        }
      });
    },
    // 更新评论输入框的内容
    updateView(tag, val, i, j) {
      if (tag) {
        this.discussionList[i].discontent = val;
      } else {
        this.discussionList[i].childList[j].discontent = val;
      }
      this.$forceUpdate();
    },
    // 展示评论输入框
    showDiscussion(tag, i, j) {
      if (tag) {
        this.discussionList[i].tagReply = !this.discussionList[i].tagReply;
      } else {
        this.discussionList[i].childList[j].tagReply = !this.discussionList[i]
          .childList[j].tagReply;
      }
      this.$forceUpdate();
    },
    // 添加评论
    addDiscussion(tag, i, j) {
      // console.log("添加评论");
      this.addquery.id = this.id;
      this.addquery.type = this.type;
      // 一级评论
      if (tag) {
        this.addquery.bedid = 0;
        this.addquery.childid = 0;
        this.addquery.content = this.discontent;
      } else {
        // 二级评论
        if (j == undefined) {
          // 传入bedid  和 childid
          this.addquery.bedid = this.discussionList[i].did;
          if (this.discussionList[i].childid == 0) {
            this.addquery.childid = this.discussionList[i].did;
          } else {
            this.addquery.childid = this.discussionList[i].childid;
          }
          // 传入内容
          this.addquery.content = this.discussionList[i].discontent;
        } else {
          // 传入bedid  和 childid
          this.addquery.bedid = this.discussionList[i].childList[j].did;
          if (this.discussionList[i].childList[j].childid == 0) {
            this.addquery.childid = this.discussionList[i].childList[j].did;
          } else {
            this.addquery.childid = this.discussionList[i].childList[j].childid;
          }
          // 传入内容
          this.addquery.content = this.discussionList[i].childList[
            j
          ].discontent;
        }
      }
      console.log(this.addquery);
      if (this.addquery.content == "") {
        this.$message.error("内容不能为空！");
        return;
      }
      discussionAdd(this.addquery).then((res) => {
        console.log(res);
        // 一级评论内容清空
        this.discontent = "";
        // 更新评论
        this.getDiscussion();
      });
    },
    //  获取评论
    getDiscussion() {
      this.findquery.id = this.id;
      this.findquery.type = this.type;
      findDiscussion(this.findquery).then((res) => {
        var dis = res.data;
        for (let i = 0; i < dis.length; i++) {
          dis[i].createtime = timeQuantum(dis[i].createtime);
          dis[i].tagReply = false;
          dis[i].discontent = "";

          for (let j = 0; j < dis[i].childList.length; j++) {
            // console.log(dis[i].childList[j].createtime);
            dis[i].childList[j].createtime = timeQuantum(
              dis[i].childList[j].createtime
            );
            dis[i].childList[j].tagReply = false;
            dis[i].childList[j].discontent = "";
          }
        }
        this.discussionList = dis;
        this.$forceUpdate();
      });
    },
  },
};
</script>
<style scoped>
.discussion {
  border-radius: 5px;
  padding: 10px 20px;
  background-color: #fff;
}
.noDiscussion {
  font-size: 12px;
  color: #a4b0be;
  line-height: 30px;
  text-align: center;
}

.username {
  color: #6d757a;
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  margin-right: 8px;
}
.discussioncontent {
  color: #222222;
  line-height: 20px;
  padding: 2px 0;
  font-size: 14px;
  text-shadow: none;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
.reply {
  line-height: 20px;
  padding: 2px 0;
  font-size: 14px;
  font-weight: normal;
  color: #222222;
  margin-right: 8px;
}
.replyusername {
  color: #409eff;
  margin-right: 8px;
}
/* #409eff */
.discussioncount {
  color: #99a2aa;
  line-height: 26px;
  font-size: 12px;
}
.discussioncount img {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: middle;
}
.discussioncount span {
  /* margin-left: 10px; */
  margin-right: 10px;
  vertical-align: middle;
}
.one {
  display: flex;
  border-top: 1px solid #e5e9ef;
}
.one-left {
  flex: 1;
  vertical-align: top;
}
.one-left > img {
  margin-top: 22px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.one-right {
  flex: 10;
  padding: 22px 10px;
}
.second {
  display: flex;
  padding: 10px 0px 0px;
}
.second-left {
  flex: 1;
  max-width: 35px;
}
.second-left > img {
  margin-top: 11px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
.second-right {
  flex: 10;
}
.add {
  display: flex;
  justify-content: space-between;
  margin: 10px 0px;
}
.add > :nth-child(0) {
  flex: 7;
  /* background-color: red; */
}
.add > :nth-child(1) {
  flex: 3;
  /* background-color: blue; */
}
</style>